<div class="box">
  <div class="crumb"></div>
  <!-- 上部选择 -->
  <div class="box_top">
    <dl class="one">
      <dt class="Fkey">已选择</dt>
      <dd class="Fvalues oz">
        <ul></ul>
      </dd>
    </dl>
    <dl class="two">
      <dt class="Fkey">分类</dt>
      <dd class="Fvalues">
        <a href="./category.html">旗袍</a>
        <a
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;category=连衣裙&amp;pageNum=1"
          >连衣裙</a
        >
      </dd>
    </dl>
    <dl class="two">
      <dt class="Fkey">品牌</dt>
      <dd class="Fvalues">
        <a
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;brand=MISS+LISA"
          >MISS LISA</a
        >
        <a
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;brand=%E5%8D%9A%E4%BA%BABoren"
          >博人Boren</a
        >
        <a
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;brand=%E6%9C%A8%E7%9C%9F%E4%BA%86"
          >木真了</a
        >
        <a
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;brand=%E7%9A%AE%E5%B0%94%E5%8D%A1%E4%B8%B9pierre+cardin"
          >皮尔卡丹pierre cardin</a
        >
        <a
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;brand=%E9%BB%9B%E8%8B%B1"
          >黛英</a
        >
      </dd>
    </dl>
  </div>
  <!-- 筛选部分 -->
  <div class="box_info">
    <ul class="info_lef">
      <li>
        <a
          class="transition up"
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;sortId=5&amp;sortOrder=2"
          >点击热度<i></i
        ></a>
      </li>
      <li class="sortcut"></li>
      <li>
        <a
          class="transition on up"
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;sortId=4&amp;sortOrder=2"
          >销量<i></i
        ></a>
      </li>
      <li class="sortcut"></li>
      <li>
        <a
          class="transition up"
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;sortId=2&amp;sortOrder=2"
          >价格<i></i
        ></a>
      </li>
      <li class="sortcut"></li>
      <li>
        <a
          class="transition up"
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;sortId=3&amp;sortOrder=2"
          >上架时间<i></i
        ></a>
      </li>
      <li class="sortcut"></li>
      <li>
        <a
          class="transition up"
          href="/search.html?pageSize=20&amp;keyword=%E6%97%97%E8%A2%8D&amp;pageNum=1&amp;sortId=1&amp;sortOrder=2"
          >折扣<i></i
        ></a>
      </li>
    </ul>
    <div class="info_main">
      <ul class="prices">
        <li>
          <input
            class="input"
            type="text"
            placeholder="￥"
            onkeyup="if(this.value==this.value2)return;if(this.value.search(/^\d*(?:\.\d{0,2})?$/)==-1)this.value=(this.value2)?this.value2:'';else this.value2=this.value;"
          />
        </li>
        <li class="sep">-</li>
        <li>
          <input
            class="input"
            type="text"
            placeholder="￥"
            onkeyup="if(this.value==this.value2)return;if(this.value.search(/^\d*(?:\.\d{0,2})?$/)==-1)this.value=(this.value2)?this.value2:'';else this.value2=this.value;"
          />
        </li>
        <li class="btnli dis">
          <input
            class="btn"
            type="button"
            value="确定"
            onclick="priceRange();"
          />
        </li>
      </ul>
    </div>
    <div class="info_main">
      <ul class="count">
        <li>
          <input
            class="input"
            type="text"
            placeholder="折"
            onkeyup="if(this.value==this.value2)return;if(this.value.search(/^\d*(?:\.\d{0,2})?$/)==-1)this.value=(this.value2)?this.value2:'';else this.value2=this.value;"
          />
        </li>
        <li>-</li>
        <li>
          <input
            class="input"
            type="text"
            placeholder="折"
            onkeyup="if(this.value==this.value2)return;if(this.value.search(/^\d*(?:\.\d{0,2})?$/)==-1)this.value=(this.value2)?this.value2:'';else this.value2=this.value;"
          />
        </li>
        <li class="btnli dis">
          <input class="btn" type="button" value="确定" />
        </li>
      </ul>
    </div>
    <ul class="info_rig">
      <li class="pageInfo">共103件商品</li>
      <li>上一页</li>
      <li>1/6</li>
      <li>下一页</li>
    </ul>
  </div>
  <!-- 渲染部分 -->
  <div class="box_bot" id="list">
    <div class="cen" id="list"> 
      <img
        class="lazy"
        data-original="http://images.shopin.net/images/1008/2018/07/27/7e4ddb1ea21ae5c1abcf3f57131902e9_0.jpg_resize190"
        alt=""
      />
      <p>木真了 旗袍 春夏 旗袍 MQXVBZ0338</p>
      <div>
        <span>￥599.0</span>
        <s>￥3380</s>
        <button>加入购物车</button>
      </div>
    </div>
  </div>
  <div class="pagination"></div>
  </div>

  <script src="./javascripts/jQuery.js"></script>
  <script src="./javascripts/jquery.pagination.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
  <script>
    // 购物车功能实现
    $(function () {
      // 1. 页面之中所有内容的加载都是异步的;
      // 2. 我们给元素添加事件的时候都是使用 事件委托实现的;
      $.ajax({
        url: "./json/data.json",
      }).then(function (res) {
        render(res.datas);
      });

      function render(list) {
        goods_data = list;

        $(".box_bot").html(
          list
            .map(
              (item, index) => `
            <div class="cen">
              <a href="./product.html">
                <img class="lazy" data-original=${index} src="${item.image}" alt=""/>
                </a>
                <p>"${item.title}"</p>
                <div><span>"${item.price}"</span>
                    <s>"${item.sale}"</s>
                    <button data-id=${index}>加入购物车</button>
                </div>
            </div>`
            )
            .join("")
        );
      }
      // $(".box_bot").on("click", ".cen img", function () {
      //   addCart_one($(this).attr("data-id"));
      // });
      // 事件委托添加事件 :
      $(".box_bot").on("click", "button", function () {
        addCart($(this).attr("data-id"));
      });
      // 加载过来的全部商品数据;
      var goods_data = null;
      // 创建购物车数据;
      // 我们每次在使用cart的时候都要去先获取原本localstorage里面的数据;
      var cart = (function () {
        // 如果购物车数据存在,那么我们就把购物车数据变成对象；
        // 如果购物车数据解释时报错我们就重新创建新的的购物车数据;
        if (localStorage.getItem("cart")) {
          var data = null;
          try {
            data = JSON.parse(localStorage.getItem("cart"));
          } catch (e) {
            data = {};
          }

          return data;
        } else {
          return {};
        }
      })();

      // 购物车数据的对象 :
      // key : value ;
      // key : 当前元素的下标；
      // value : 下标所对应的数据;
      function addCart(id) {
        // 我们现在向购物车之中添加数据， 添加多少都一样;
        // 我们要判断，当前购物车是要添加新的数据， 还是添加已有的数据;
        if (id in cart) {
          cart[id].count++;
        } else {
          // 给数据添加上数量信息;
          goods_data[id].count = 1;
          cart[id] = goods_data[id];
        }
        // 每次添加购物车之后都把购物车信息保存在localstorage里面;
        localStorage.setItem("cart", JSON.stringify(cart));
      }
      // function addCart_one(id) {
      //   var name = (Math.random() + "").slice(2) + Date.now();
      //   localStorage.setItem( name , JSON.stringify(goods_data[id]))
      //   open("./product.html#" + name);
      //  console.log($(this).attr("id"));
      // }
    });

    // 分页器功能：
    
    // 懒加载 :
    $(function () {
      $(".lazy").lazyload();
    });
  </script>
</div>
